<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行政区域详情</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            padding: 20px;
            color: #333;
            line-height: 1.5;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
        }
        
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            background: linear-gradient(to right, #f8f9fa, #ffffff);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .title-section {
            flex: 1;
        }
        
        h1 {
            color: #2c3e50;
            margin-bottom: 10px;
            font-weight: 500;
        }
        
        .subtitle {
            color: #7f8c8d;
            font-size: 16px;
        }
        
        .btn {
            padding: 10px 18px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
            font-weight: 500;
        }
        
        .btn-primary {
            background-color: #3498db;
            color: white;
            box-shadow: 0 2px 5px rgba(52, 152, 219, 0.2);
        }
        
        .btn-primary:hover {
            background-color: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
        }
        
        .btn-default {
            background-color: #fff;
            border: 1px solid #ddd;
            color: #666;
        }
        
        .btn-default:hover {
            background-color: #f8f9fa;
            border-color: #ccc;
        }
        
        .btn-danger {
            background-color: #e74c3c;
            color: white;
            box-shadow: 0 2px 5px rgba(231, 76, 60, 0.2);
        }
        
        .btn-danger:hover {
            background-color: #c0392b;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3);
        }
        
        .detail-form {
            background: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
        
        .detail-form:hover {
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }
        
        .form-group {
            margin-bottom: 25px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 10px;
            color: #666;
            font-size: 14px;
            font-weight: 500;
        }
        
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        .form-control:focus {
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
            outline: none;
        }
        
        .form-control:disabled {
            background-color: #f8f9fa;
            cursor: not-allowed;
            opacity: 0.7;
        }
        
        .form-row {
            display: flex;
            gap: 25px;
            margin-bottom: 5px;
        }
        
        .form-col {
            flex: 1;
        }
        
        .action-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
            margin-top: 40px;
        }
        
        .status-toggle {
            display: flex;
            gap: 10px;
        }
        
        .status-option {
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s ease;
        }
        
        .status-option:hover {
            background-color: #f5f7fa;
        }
        
        .status-option.active {
            background-color: #3498db;
            color: white;
            border-color: #3498db;
            box-shadow: 0 2px 5px rgba(52, 152, 219, 0.2);
        }
        
        /* 表单验证样式 */
        .form-control.invalid {
            border-color: #e74c3c;
        }
        
        .invalid-feedback {
            color: #e74c3c;
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }
        
        .form-control.invalid + .invalid-feedback {
            display: block;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .form-row {
                flex-direction: column;
                gap: 15px;
            }
            
            .action-buttons {
                flex-direction: column-reverse;
                gap: 10px;
            }
            
            .btn {
                width: 100%;
                justify-content: center;
            }
            
            header {
                flex-direction: column;
                align-items: flex-start;
            }
        }
        
        /* 加载动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .detail-form {
            animation: fadeIn 0.4s ease-out forwards;
        }
        
        /* 气泡提示 */
        .tooltip {
            position: relative;
            display: inline-block;
            margin-left: 5px;
            color: #aaa;
        }
        
        .tooltip .tooltip-text {
            visibility: hidden;
            width: 200px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -100px;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 12px;
            line-height: 1.4;
        }
        
        .tooltip:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="title-section">
                <h1><i class="fas fa-map-marked-alt"></i> 行政区域详情</h1>
                <p class="subtitle">查看和编辑行政区域信息</p>
            </div>
        </header>
        
        <div class="detail-form">
            <div class="form-row">
                <div class="form-col">
                    <div class="form-group">
                        <label class="form-label">
                            区域编码
                            <span class="tooltip">
                                <i class="fas fa-info-circle"></i>
                                <span class="tooltip-text">区域唯一标识码，由系统自动生成</span>
                            </span>
                        </label>
                        <input type="text" class="form-control" id="regionCode" placeholder="请输入区域编码">
                        <div class="invalid-feedback">请输入有效的区域编码</div>
                    </div>
                </div>
                <div class="form-col">
                    <div class="form-group">
                        <label class="form-label">区域名称</label>
                        <input type="text" class="form-control" id="regionName" placeholder="请输入区域名称">
                        <div class="invalid-feedback">区域名称不能为空</div>
                    </div>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-col">
                    <div class="form-group">
                        <label class="form-label">区域层级</label>
                        <select class="form-control" id="regionLevel">
                            <option value="province">省份</option>
                            <option value="city">城市</option>
                            <option value="district">区县</option>
                            <option value="street">街道</option>
                            <option value="committee">委员会</option>
                        </select>
                    </div>
                </div>
                <div class="form-col">
                    <div class="form-group">
                        <label class="form-label">上级区域</label>
                        <select class="form-control" id="parentRegion">
                            <option value="">请选择上级区域</option>
                        </select>
                        <div class="invalid-feedback">请选择上级区域</div>
                    </div>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-col">
                    <div class="form-group">
                        <label class="form-label">排序号</label>
                        <input type="number" class="form-control" id="sortOrder" placeholder="请输入排序号">
                    </div>
                </div>
                <div class="form-col">
                    <div class="form-group">
                        <label class="form-label">状态</label>
                        <div class="status-toggle">
                            <div class="status-option active" onclick="toggleStatus('active')">
                                <i class="fas fa-check-circle"></i> 启用
                            </div>
                            <div class="status-option" onclick="toggleStatus('inactive')">
                                <i class="fas fa-times-circle"></i> 停用
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-label">备注说明</label>
                <textarea class="form-control" id="remarks" rows="3" placeholder="请输入备注说明"></textarea>
            </div>
            
            <div class="action-buttons">
                <button class="btn btn-default" onclick="location.href='region-list.html'">
                    <i class="fas fa-arrow-left"></i> 返回
                </button>
                <button class="btn btn-danger" onclick="deleteRegion()" id="deleteBtn" style="display: none;">
                    <i class="fas fa-trash"></i> 删除
                </button>
                <button class="btn btn-primary" onclick="saveRegion()">
                    <i class="fas fa-save"></i> 保存
                </button>
            </div>
        </div>
    </div>

    <script>
        let currentStatus = 'active';
        let isEditMode = false;
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 获取URL参数
            const urlParams = new URLSearchParams(window.location.search);
            const id = urlParams.get('id');
            const mode = urlParams.get('mode');
            
            isEditMode = mode === 'edit';
            
            if (id) {
                // 编辑模式
                document.getElementById('deleteBtn').style.display = 'block';
                loadRegionData(id);
            }
            
            // 根据区域层级加载上级区域选项
            document.getElementById('regionLevel').addEventListener('change', function(e) {
                loadParentOptions(e.target.value);
            });
            
            // 添加表单验证
            addFormValidation();
        });
        
        // 切换状态
        function toggleStatus(status) {
            currentStatus = status;
            const options = document.querySelectorAll('.status-option');
            options.forEach(option => {
                option.classList.remove('active');
                if ((status === 'active' && option.textContent.includes('启用')) || 
                    (status === 'inactive' && option.textContent.includes('停用'))) {
                    option.classList.add('active');
                }
            });
        }
        
        // 加载区域数据
        function loadRegionData(id) {
            // 模拟从后端获取数据
            const region = {
                code: '370102001',
                name: '解放路街道',
                level: 'street',
                parent: '历下区',
                sortOrder: 1,
                status: 'active',
                remarks: '这是一条测试数据'
            };
            
            // 填充表单
            document.getElementById('regionCode').value = region.code;
            document.getElementById('regionName').value = region.name;
            document.getElementById('regionLevel').value = region.level;
            document.getElementById('sortOrder').value = region.sortOrder;
            document.getElementById('remarks').value = region.remarks;
            
            toggleStatus(region.status);
            
            // 加载上级区域选项
            loadParentOptions(region.level, region.parent);
        }
        
        // 加载上级区域选项
        function loadParentOptions(level, selectedValue = '') {
            const parentSelect = document.getElementById('parentRegion');
            parentSelect.innerHTML = '<option value="">请选择上级区域</option>';
            
            // 根据不同层级加载不同的上级区域选项
            const parentOptions = {
                province: [],
                city: ['山东省', '河北省', '江苏省'],
                district: ['济南市', '青岛市', '烟台市'],
                street: ['历下区', '市中区', '槐荫区'],
                committee: ['解放路街道', '文化路街道', '大明湖街道']
            };
            
            const options = parentOptions[level] || [];
            options.forEach(option => {
                const optionElement = document.createElement('option');
                optionElement.value = option;
                optionElement.textContent = option;
                if (option === selectedValue) {
                    optionElement.selected = true;
                }
                parentSelect.appendChild(optionElement);
            });
        }
        
        // 添加表单验证
        function addFormValidation() {
            const regionCode = document.getElementById('regionCode');
            const regionName = document.getElementById('regionName');
            const parentRegion = document.getElementById('parentRegion');
            
            regionCode.addEventListener('blur', function() {
                if (!this.value.trim()) {
                    this.classList.add('invalid');
                } else {
                    this.classList.remove('invalid');
                }
            });
            
            regionName.addEventListener('blur', function() {
                if (!this.value.trim()) {
                    this.classList.add('invalid');
                } else {
                    this.classList.remove('invalid');
                }
            });
            
            parentRegion.addEventListener('change', function() {
                const level = document.getElementById('regionLevel').value;
                if (level !== 'province' && !this.value) {
                    this.classList.add('invalid');
                } else {
                    this.classList.remove('invalid');
                }
            });
        }
        
        // 保存区域数据
        function saveRegion() {
            // 表单验证
            const regionCode = document.getElementById('regionCode');
            const regionName = document.getElementById('regionName');
            const regionLevel = document.getElementById('regionLevel').value;
            const parentRegion = document.getElementById('parentRegion');
            
            let isValid = true;
            
            if (!regionCode.value.trim()) {
                regionCode.classList.add('invalid');
                isValid = false;
            }
            
            if (!regionName.value.trim()) {
                regionName.classList.add('invalid');
                isValid = false;
            }
            
            if (regionLevel !== 'province' && !parentRegion.value) {
                parentRegion.classList.add('invalid');
                isValid = false;
            }
            
            if (!isValid) {
                return;
            }
            
            const regionData = {
                code: regionCode.value,
                name: regionName.value,
                level: regionLevel,
                parent: parentRegion.value,
                sortOrder: document.getElementById('sortOrder').value,
                status: currentStatus,
                remarks: document.getElementById('remarks').value
            };
            
            console.log('保存区域数据:', regionData);
            // 这里应该调用后端API保存数据
            
            // 保存成功提示
            alert('区域数据保存成功！');
            
            // 保存成功后返回列表页
            location.href = 'region-list.html';
        }
        
        // 删除区域
        function deleteRegion() {
            if (confirm('确定要删除该区域吗？此操作不可恢复！')) {
                // 这里应该调用后端API删除数据
                alert('区域删除成功！');
                location.href = 'region-list.html';
            }
        }
    </script>
</body>
</html> 